import React from "react";
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  ScrollView,
} from "react-native";
import { Stack, router } from "expo-router";
import { MaterialCommunityIcons, Feather } from "@expo/vector-icons";
import { TwitterPalette } from "@/styles/twitter.style";
import { getHeaderStyle } from "@/styles/header.style";
import { useTheme } from "@/contexts/ThemeContext";

export default function SettingsScreen() {
  // 获取当前主题模式
  const { themeMode } = useTheme();

  // 获取基于当前主题的header样式
  const headerStyles = getHeaderStyle(themeMode);

  // 根据主题设置颜色
  const isDark = themeMode === "dark";
  const backgroundColor = isDark ? "#15202B" : "#FFFFFF";
  const textColor = isDark ? "#FFFFFF" : TwitterPalette.textPrimary;
  const borderColor = isDark ? "#38444D" : TwitterPalette.border;
  const secondaryTextColor = isDark ? "#8899A6" : TwitterPalette.textSecondary;

  // 设置项列表
  const settingsItems = [
    {
      title: "账号与安全",
      icon: (
        <MaterialCommunityIcons
          name="shield-account-outline"
          size={22}
          color={TwitterPalette.blue}
        />
      ),
      description: "隐私、安全、登录设置",
      onPress: () => router.navigate("/settings/account"),
    },
    {
      title: "主题设置",
      icon: (
        <MaterialCommunityIcons
          name={isDark ? "moon-waning-crescent" : "white-balance-sunny"}
          size={22}
          color={TwitterPalette.blue}
        />
      ),
      description: `当前: ${isDark ? "深色" : "浅色"}模式`,
      onPress: () => router.navigate("/settings/theme"),
    },
    {
      title: "通知",
      icon: (
        <MaterialCommunityIcons
          name="bell-outline"
          size={22}
          color={TwitterPalette.blue}
        />
      ),
      description: "消息通知、提醒设置",
      onPress: () => router.navigate("/settings/notifications"),
    },
    {
      title: "隐私",
      icon: (
        <MaterialCommunityIcons
          name="lock-outline"
          size={22}
          color={TwitterPalette.blue}
        />
      ),
      description: "管理隐私与数据",
      onPress: () => router.navigate("/settings/privacy"),
    },
    {
      title: "存储与数据",
      icon: (
        <MaterialCommunityIcons
          name="database-outline"
          size={22}
          color={TwitterPalette.blue}
        />
      ),
      description: "管理存储空间与网络",
      onPress: () => router.navigate("/settings/storage"),
    },
    {
      title: "聊天设置",
      icon: (
        <MaterialCommunityIcons
          name="chat-outline"
          size={22}
          color={TwitterPalette.blue}
        />
      ),
      description: "聊天背景、字体大小",
      onPress: () => router.navigate("/settings/chat"),
    },
    {
      title: "AI助手",
      icon: (
        <MaterialCommunityIcons
          name="robot-outline"
          size={22}
          color={TwitterPalette.blue}
        />
      ),
      description: "智能聊天助手功能",
      onPress: () => router.navigate("/settings/ai-assistant"),
    },
  ];

  return (
    <>
      <Stack.Screen
        options={{
          title: "设置",
          headerTitleAlign: headerStyles.headerTitleAlign as "left" | "center",
          headerStyle: headerStyles.headerStyle,
          headerTintColor: headerStyles.headerTintColor,
          headerTitleStyle: headerStyles.headerTitleStyle,
        }}
      />
      <ScrollView
        style={[
          styles.container,
          { backgroundColor: isDark ? "#15202B" : "#F5F8FA" },
        ]}
        showsVerticalScrollIndicator={false}
      >
        <View style={[styles.listGroup, { backgroundColor }]}>
          {settingsItems.map((item, i) => (
            <TouchableOpacity
              key={i}
              style={[
                styles.listItem,
                {
                  borderBottomColor: borderColor,
                  borderBottomWidth: i === settingsItems.length - 1 ? 0 : 0.5,
                },
              ]}
              activeOpacity={0.7}
              onPress={item.onPress}
            >
              <View style={styles.itemLeft}>
                {item.icon}
                <View style={styles.itemTextContainer}>
                  <Text style={[styles.itemTitle, { color: textColor }]}>
                    {item.title}
                  </Text>
                  {item.description && (
                    <Text
                      style={[
                        styles.itemDescription,
                        { color: secondaryTextColor },
                      ]}
                    >
                      {item.description}
                    </Text>
                  )}
                </View>
              </View>
              <Feather
                name="chevron-right"
                size={22}
                color={secondaryTextColor}
              />
            </TouchableOpacity>
          ))}
        </View>

        <Text style={[styles.versionText, { color: secondaryTextColor }]}>
          版本 1.0.0
        </Text>
      </ScrollView>
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
  listGroup: {
    borderRadius: 12,
    overflow: "hidden",
    marginBottom: 16,
  },
  listItem: {
    paddingVertical: 16,
    paddingHorizontal: 16,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
  },
  itemLeft: {
    flexDirection: "row",
    alignItems: "center",
    flex: 1,
  },
  itemTextContainer: {
    marginLeft: 16,
    flex: 1,
  },
  itemTitle: {
    fontSize: 16,
    fontWeight: "500",
  },
  itemDescription: {
    fontSize: 13,
    marginTop: 2,
  },
  versionText: {
    textAlign: "center",
    fontSize: 13,
    marginVertical: 20,
  },
});
